<template>
    <div class="prompt">
        <h3>{{title}}<span style="font-size: 14px;color:gray;">({{prompt}})</span></h3>
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 40 }" v-model="inputActivePromptText"
            @input="userHandInputActivePrompt" disabled></el-input>
        <div class="sys-prompt">
            <span>
                <ArrowDown @click="showActivePrompt = false;" v-if="showActivePrompt"
                    style="width: 1em; height: 1em; margin-right: 8px;color: #409EFF;cursor: pointer;" />
                <ArrowUp @click="showActivePrompt = true;" v-else
                    style="width: 1em; height: 1em; margin-right: 8px;color: #409EFF;cursor: pointer;" />

                {{tip}}
            </span>
            <span class="operation">
                <CopyDocument class="operation-item" style="width: 1em; height: 1em; margin-right: 8px" />
                <Delete class="operation-item" style="width: 1em; height: 1em; margin-left: 8px ;color:red;" />
            </span>
            <span class="input-prompt" style="margin-left: 20px;">
                <el-input @keydown.enter="userAddActivePrompt" style="width:50%;" placeholder="提示词" clearable
                    v-model="userInputPromptText"></el-input>
                <el-button @click="userAddActivePrompt" type="primary" style="margin-left: 20px;">添加提示词</el-button>
            </span>
            <!-- 展示用户选择的提示词开始 -->
            <div class="user-choice-prompt">
                <el-tag :color="item.color" style="color:white;" @close="addActivePromptText(item)"
                    v-for="(item, index) in choiceActivePromptTextList" :key="index" closable>{{ item.cn
                    }}</el-tag>
            </div>
            <!-- 展示用户选择的提示词结束 -->
        </div>
        <div class="prompt-text" v-show="showActivePrompt">
            <div class="header">
                <span @click="currentActivePromptIndex = index; currentActivePromptTypeIndex = 0"
                    :class="currentActivePromptIndex == index ? 'active' : ''" v-for="(item, index) in activePromptText"
                    :key="index">
                    {{ item.name }}
                </span>
            </div>
            <div class="childern">
                <span @click="currentActivePromptTypeIndex = index"
                    :class="currentActivePromptTypeIndex == index ? 'active' : ''"
                    v-for="(item, index) in activePromptText[currentActivePromptIndex].childern" :key="index">
                    {{ item }}
                </span>
            </div>

            <div class="text">
                <PromptText :label="item.cn" :color="activePromptText[currentActivePromptIndex].color"
                    @click="addActivePromptText(item)" v-for="(item, index) in currentActivePromptText" :key="index">
                </PromptText>
            </div>

        </div>
    </div>
</template>

<script setup>
import { ref, computed,defineProps } from 'vue';
import { activePrompt, findActivePromptText } from "../../data/prompt"
import PromptText from '../showcomp/PromptText.vue';
import { CopyDocument, Delete, ArrowDown, ArrowUp } from '@element-plus/icons-vue';

const props = defineProps(["title","prompt","tip"])
const title = computed(()=>{return props.title})
const prompt = computed(()=>{return props.prompt})
const tip = computed(()=>{return props.tip})

// 是否显示系统提示词
var showActivePrompt = ref(false)
// 当前选择的主提示词索引 人物，服饰，表情动作
var currentActivePromptIndex = ref(0)
// 当前选择的副提示词索引 对象，身份，二次元
var currentActivePromptTypeIndex = ref(0)
// 获取正向提示词列表对象用于找到当前应该展示的提示词
const activePromptText = activePrompt()
// 展示当前用户选择的类型提示
var currentActivePromptText = computed(() => {
    let mainLabel = activePromptText[currentActivePromptIndex.value].name
    let childLabel = activePromptText[currentActivePromptIndex.value].childern[currentActivePromptTypeIndex.value]

    return findActivePromptText(mainLabel, childLabel)
})
// 用户选择已经添加的提示词
var choiceActivePromptTextList = ref([])

// 通过点击添加提示词
const addActivePromptText = (text) => {

    var temp = []
    // 先判断该词有没有被添加
    choiceActivePromptTextList.value.forEach(promptText => {
        if (promptText.en != text.en) {
            temp.push(promptText)
        }
    });

    if (temp.length == choiceActivePromptTextList.value.length) {// 新的内容
        temp.push(text)
    }

    choiceActivePromptTextList.value = temp
    temp = []
    choiceActivePromptTextList.value.forEach(promptText => {
        temp.push(promptText.cn)
    });
    inputActivePromptText.value = temp.join(",")

}
// 用户提示词输入框输入的提示词
var inputActivePromptText = ref("")

// 用户手动输入正向提示词
const userHandInputActivePrompt = () => {
    inputActivePromptText.value += "壹壹"
}


// 用户输入的提示词
var userInputPromptText = ref("")
// 用户确认输入提示词
var userAddActivePrompt = () => {
    if (!userInputPromptText.value) {
        return
    }
    var text = {
        cn: userInputPromptText.value,
        en: userInputPromptText.value,
        color: "gray"
    }
    addActivePromptText(text)

    userInputPromptText.value = ""
}

</script>

<style  scoped>
#text2pic .preproduce .prompt {
    width: 100%;
}


#text2pic .preproduce .prompt .sys-prompt {
    font-size: 15px;
    line-height: 50px;
}

#text2pic .preproduce .prompt .sys-prompt .user-choice-prompt {
    margin: 10px 0;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}


#text2pic .preproduce .prompt .sys-prompt .user-choice-prompt .el-tag {
    margin-right: 7px;
}

#text2pic .preproduce .prompt .sys-prompt .operation {
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: 30px;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
}


#text2pic .preproduce .prompt .sys-prompt .operation .operation-item:hover {
    font-size: 18px;
}

#text2pic .preproduce .prompt .prompt-text {
    border: 2px dotted rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

#text2pic .preproduce .prompt .prompt-text .header {
    background-color: rgba(0, 0, 0, 0.1);
    font-size: 15px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#text2pic .preproduce .prompt .prompt-text .header span {
    padding: 10px 10px;
    border-right: 1px dotted black;
    cursor: pointer;
}

#text2pic .preproduce .prompt .prompt-text .header span:hover {
    background-color: blue;
    color: white;
}

#text2pic .preproduce .prompt .prompt-text .header .active {
    background-color: blue;
    color: white;
}

#text2pic .preproduce .prompt .prompt-text .childern {
    background-color: rgba(0, 0, 0, 0.1);
    margin: 3px;
    font-size: 15px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#text2pic .preproduce .prompt .prompt-text .childern span {
    padding: 10px 10px;
    cursor: pointer;
}

#text2pic .preproduce .prompt .prompt-text .childern span:hover {
    border-bottom: 3px solid blue;
}

#text2pic .preproduce .prompt .prompt-text .childern .active {
    border-bottom: 3px solid blue;
}

#text2pic .preproduce .prompt .prompt-text .text {
    padding: 10px;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
</style>